如何運用HERE JavaScript於地圖上展示地理定位服務

12th鐵人賽神助攻 here

D.C 2020-09-09 13:50:05 ‧ 1889 瀏覽

分享至

前言

延續「如何運用HERE JavaScript快速建立前端的網頁顯示地圖」，這篇將介紹，如何透由經緯度或地址資訊，定位出所在位置，並顯示於HERE MAP上。
更多的細節與內容，請參考HERE Developer :
(https://developer.here.com/documentation/maps/3.1.18.1/dev_guide/topics/geocoding.html

方法

1.建立HTML框架，導入HERE MAP網頁

這個部分，在此篇文章將不再另外說明，請參考先前的文章「如何運用HERE JavaScript快速建立前端的網頁顯示地圖」(https://ithelp.ithome.com.tw/articles/10233305)

2.呼叫HERE地理定位服務

地理定位的方式主要為兩種。

Geocode - 給予經緯座標資訊，透過HERE雲服務回傳該地點的地址訊息。

// Call the reverse geocode method with the geocoding parameters,
// the callback and an error callback function (called if a
// communication error occurs):
service.reverseGeocode({
  at: '25.038225, 121.568967'
}, (result) => {
  result.items.forEach((item) => {
    // Assumption: ui is instantiated
    // Create an InfoBubble at the returned location with
    // the address as its contents:
    ui.addBubble(new H.ui.InfoBubble(item.position, {
      content: item.address.label
    }));
  });
}, alert);

Revise Geocode - 給予地址資訊，透過HERE雲服務回傳該地點的座標訊息


// Get an instance of the geocoding service:
var service = platform.getSearchService();

// Call the geocode method with the geocoding parameters,
// the callback and an error callback function (called if a
// communication error occurs):
service.geocode({
  q: '台北市信義區松仁路89號'
}, (result) => {
  // Add a marker for each location found
  result.items.forEach((item) => {
    map.addObject(new H.map.Marker(item.position));
  });
}, alert);

Codebase :

<html>

<head>
    <title>HERE MAP By JS</title>
    <meta name="viewport" content="initial-scale=1.0,width=device-width" />
    <script src="https://js.api.here.com/v3/3.1/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://js.api.here.com/v3/3.1/mapsjs-core-legacy.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://js.api.here.com/v3/3.1/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://js.api.here.com/v3/3.1/mapsjs-service-legacy.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://js.api.here.com/v3/3.1/mapsjs-ui.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
</head>

<body>
    <div style="width: 100%; height: 500px" id="mapContainer"></div>
    <script>
    // Create a Platform object:
    var platform = new H.service.Platform({
        'apikey': '[Your APIKEY]'
    });

    // Get an object containing the default map layers:
    var defaultLayers = platform.createDefaultLayers({ lg: 'CHT', lg2: 'ENG', size: 512 });

    // Instantiate the map using the vecor map with the
    // default style as the base layer:
    var map = new H.Map(
        document.getElementById('mapContainer'),
        defaultLayers.raster.normal.map, {
            zoom: 15,
            center: { lat: 25.037537, lng: 121.564376 },
        });

    // Enable the event system on the map instance:
    var mapEvents = new H.mapevents.MapEvents(map);

    // Add event listener:
    map.addEventListener('tap', function(evt) {
        // Log 'tap' and 'mouse' events:
        console.log(evt.type, evt.currentPointer.type);
    });

    // Instantiate the default behavior, providing the mapEvents object: 
    var behavior = new H.mapevents.Behavior(mapEvents);



    // Create the default UI:
    var ui = H.ui.UI.createDefault(map, defaultLayers, 'zh-CN')


    // Get an instance of the geocoding service:
    var service = platform.getSearchService();



    // Call the geocode method with the geocoding parameters,
    // the callback and an error callback function (called if a
    // communication error occurs):
    service.geocode({
        q: '台北市信義區松仁路89號'
    }, (result) => {
        // Add a marker for each location found
        result.items.forEach((item) => {
            GeocodeResult = new H.map.Marker(item.position);
            map.addObject(GeocodeResult);
        });
    }, alert);

    

    //Call the reverse geocode method with the geocoding parameters,
    //the callback and an error callback function (called if a
    //communication error occurs):
    service.reverseGeocode({
        at: '25.037537,121.564376'
    }, (result) => {
        result.items.forEach((item) => {
            // Assumption: ui is instantiated
            // Create an InfoBubble at the returned location with
            // the address as its contents:
            ui.addBubble(new H.ui.InfoBubble(item.position, {
                content: item.address.label
            }));
        

        });
    }, alert);

    </script>
</body>

</html>